<template>
	<view :style="{'padding-top':CustomBar+'rpx'}">
		<view class="cuIcon-unfold justify-end padding-right text-bold" style="font-size: 40rpx;" @click="userHome()"></view>
		<view class="user_head padding">
			<view class="flex align-center" @click="userInfoMen()">
				<image :src="userInfo.avatar" mode="aspectFill" class="head_image animation-slide-left"></image>
				<view class="margin-left">
					<view class="align-center" style="width: 400rpx;">
						<view class=" text-bold  text-lg one_overflow">{{userInfo.userName}}</view>
						<image :src="userInfo.gender==1?'/static/user/imgnu.png':'/static/user/imgnan.png'"
							mode="widthFix" class="head_sex"></image>
					</view>
					<view class="head_id">ID:{{userInfo.mobile}}</view>
				</view>
			</view>
			<view class="head_vip padding-top " @click.stop="$tools.push('/pages/user/modules/vip')">
				<view class="flex align-center justify-between padding-lr" style="width: 100%;">
					<view class="align-center">
						<text class="vip_text margin-left">
							VIP |
						</text>
						<text class="margin-left" v-if="userInfo.vip<=0">开通VIP享大额钻石</text>
						<text class="margin-left" v-if="userInfo.vip>0">已成为VIP</text>
					</view>
					<view class="vip_button margin-right">
						{{userInfo.vip>0?'立即续费':'立即开通'}}
					</view>
				</view>
			</view>
		</view>
		<view class="bg-white" style="margin-top: -20rpx;">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper_image">
				<swiper-item v-for="(item,index) in 3" class="swiper_image">
					<image src="/static/ces.jpg" mode="aspectFill" class="swiper_image"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="padding solid-bottom align-center justify-between animation-slide-left "
		 v-for="(item,index) in plugins" :key="index" @click="pluginsMen(item)"
		 hover-class="bg-gray " >
			<view>
				<image :src="item.icon" mode="" class="plugins_icon"></image>
				<text class="margin-left">{{item.title}}</text>
			</view>
			<view class="cuIcon-right text-gray"></view>
		</view>


	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/common/path.js'
	export default {
		data() {
			return {
				userInfo: {}, //用户信息
				titleActiveNum: 0, //默认选中状态
			}
		},
		//生命周期函数
		onReady() {},
		onLoad() {},
		onShow() {
			this.getUserInfo() //用户信息
		},
		methods: {
			//首页跳转
			userHome(){
				uni.switchTab({
					url:'../home/index'
				})
			},
			
			//获取用户信息
			getUserInfo() {
				let data = {
					id: uni.getStorageSync('userInfo').id
				}
				this.Http.POST(getUserInfo, data)
					.then((res) => {
						if (res.code == 0) {
							// console.log('[用户信息]', res);
							this.userInfo = res.data
							uni.setStorageSync('userInfo',res.data)
						} else {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					})
			},

			//跳转
			pluginsMen(item) {
				uni.navigateTo({
					url: item.url
				})
			},
			//设置页面跳转
			userSetting(event) {
				uni.navigateTo({
					url: 'modules/setting'
				})
			},
			//个人资料
			userInfoMen() {
				uni.navigateTo({
					url: '/pages/user/modules/userInfo'+'?id='+this.userInfo.id
				})
			}
		},
		computed: {
			titleList() {
				let titleList2 = [{
						title: "求聊",
						id: 1
					},
					{
						title: "抢聊",
						id: 2
					},
					{
						title: "广场",
						id: 3
					}
				]
				return titleList2
			},
			plugins() {
				let plugins2 = [{
						title: '购买钻石',
						icon: '/static/user/imgzuanshi.png',
						id: 1,
						url: '/pages/home/modules/diamond/index'
					},
					{
						title: '我的VIP',
						icon: '/static/user/imghuanggan.png',
						id: 2,
						url: '/pages/user/modules/vip'
					},
					{
						title: '邀请奖励',
						icon: '/static/user/imgyaoqing.png',
						id: 2,
						url: '/pages/plugins/share/share'
					},

					 {
						title: '奖励中心',
						icon: '/static/user/imgjiangli-1.png',
						id: 5,
						url: '/pages/user/modules/award/award'
					},
					{
						title: '意见反馈',
						icon: '/static/user/imgyijian.png',
						id: 3,
						url: '/pages/user/modules/feedback'
					},
					{
						title: '设置',
						icon: '/static/user/imgshezhi-1.png',
						id: 4,
						url: '/pages/user/modules/setting'
					},

				]
				return plugins2
			}

		},
		components: {}
	}
</script>

<style>
	.user_head {
		width: 750rpx;
		height: 449rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, #FCE7D4 100%);
		border-radius: 0% 0 40% 40%;
		opacity: 1;
		overflow: hidden;
		position: relative;
	}

	.head_image {
		width: 150rpx;
		height: 150rpx;
		background: rgba(0, 0, 0, 0);
		border-radius: 50%;
		opacity: 1;
		border: 8rpx solid white;
	}

	.head_id {
		width: 250rpx;
		height: 38rpx;
		background: #FDE0BB;
		border-radius: 99rpx;
		text-align: center;
		line-height: 38rpx;
		font-size: 22rpx;
		margin-top: 30rpx;
	}

	.head_sex {
		width: 40rpx;
		height: 40rpx;
		margin-left: 10rpx;
	}

	.head_vip {
		width: 700rpx;
		height: 180rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
		background: linear-gradient(180deg, #FDD1A0 0%, #E8CDB0 100%);
		position: absolute;
		bottom: 0rpx;
	}

	.vip_text {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		opacity: 1;
	}

	.vip_button {
		width: 160rpx;
		height: 54rpx;
		background: #EAA019;
		opacity: 1;
		line-height: 54rpx;
		text-align: center;
		border-radius: 99rpx;
	}

	.earnings_body {
		width: 330rpx;
		height: 178rpx;
		background-size: 100% 100%;
		background-image: url(/static/user/imgshouyi.png);
		opacity: 1;
		border-radius: 12rpx;
	}

	.invite_body {
		width: 330rpx;
		height: 178rpx;
		/* background: linear-gradient(180deg, #F3B57C 0%, #F8D78A 100%); */
		opacity: 1;
		/* border-radius: 12rpx; */
		background-image: url(/static/user/imgyaoqing-1.png);
		background-size: 100% 100%;
	}

	/* 分类图标 */
	.plugins_icon {
		width: 40rpx;
		height: 40rpx;
	}


	.swiper_image {
		width: 710rpx;
		height: 160rpx;
		background: #FFAA1C;
		border-radius: 10rpx;
		margin: 0 auto;
	}
</style>
